<template>
  <div>
    <a-modal
        :maskClosable="false"
        :title="title"
        :width="600"
        :bodyStyle="{
        padding: '0 24px'
      }"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭">
      <a-row :gutter="48">
        <a-col :span="24">
          <a-card :bordered="false">
            <div style="background: #fff;padding-left:16px;height: 100%;overflow:auto;">
              <!--<a-button type="primary" @click="allObj()">所有部门</a-button>-->
              <a-input-search @search="onSearch" style="width:100%;" placeholder="请输入关联业务分类名称"/>
              <!-- 树-->
              <template>
                <!--组织机构-->
                <a-directory-tree
                    selectable
                    :selectedKeys="selectedKeys"
                    :checkStrictly="true"
                    @select="onSelect"
                    :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                    :treeData="categoryTree"
                />
              </template>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

const queryCategoryTreeList = (params) => getAction('/api/erp/files/category/filesBusinessCategory/queryTreeList', params);
const queryCategoryList = (params) => getAction('/api/erp/files/category/filesBusinessCategory/list', params);
const searchByKeywords = (params) => getAction('/api/erp/files/category/filesBusinessCategory/searchBy', params);
export default {
  name: 'BusinessCategorySelectModal',
  components: {},
  props: ['multi'],
  data() {
    return {
      title: '选择业务分类',
      queryParam: {},
      url: {},
      choseObj: {},
      categoryTree: [],
      selectedKeys: [],
      iExpandedKeys: [],
      orgCode: '',
      loading: false,
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      toggleSearchStatus: false,
      categoryList: []
    }
  },
  created() {
    // 该方法触发屏幕自适应
    this.refresh();
    this.initSource();
  },
  computed: {
    // 计算属性的 getter
    getType: function () {
      return this.multi == true ? 'checkbox' : 'radio';
    }
  },
  methods: {
    add(selectObj) {
      this.visible = true;
      this.edit(selectObj);
    },
    edit(selectObj) {
      if (!selectObj) {
        this.selectedRowKeys = []
        this.selectionRows = []
      } else {
        this.selectedRowKeys.push(selectObj.id);
        this.selectionRows.push(selectObj);
        this.choseObj = selectObj;
      }
      if (selectObj == null) {
        this.selectionRows = [];
        this.choseObj = {};
        this.selectedRowKeys = [];
      }
    },
    loadTree() {
      var that = this
      that.categoryTree = []
      that.categoryList = []
      queryCategoryList().then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.records.length; i++) {
            let temp = res.result.records[i]
            that.categoryList.push(temp)
          }
        }
      })
      queryCategoryTreeList().then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.categoryTree.push(temp)
            that.setThisExpandedKeys(temp)
          }
          this.loading = false
        }
      })

    },
    handleCancel() {
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.visible = false;
    },
    initSource() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.choseObj = {};
    },
    handleOk() {
      this.$emit('choseObj', this.choseObj);
      this.handleCancel();
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    onSearch(value) {
      let that = this
      if (value) {
        searchByKeywords({ keyWord: value }).then((res) => {
          if (res.success) {
            that.categoryTree = []
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.categoryTree.push(temp)
            }
          } else {
            that.$message.warning(res.message)
          }
        })
      } else {
        that.loadTree()
      }

    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]];
      }
      let record = JSON.parse(JSON.stringify(e.node.dataRef));
      // this.selectionRows.push(record.id);
      let categoryName = null
      for (; true;) {
        if (record) {
          if (categoryName) {
            categoryName = record.categoryName + '/' + categoryName
          } else {
            categoryName = record.categoryName
          }
          record = this.categoryList.find((val, index, arr) => val.id == record.parentId)
        } else {
          break;
        }
      }
      let param = e.node.dataRef
      param.categoryName = categoryName
      this.choseObj = param
      this.onClearSelected();
    },

    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap > img {
  max-height: 100%;
}

</style>